﻿@page "/datagrid/column-menu"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
  <p>This sample demonstrates the default functionalities of the ColumnMenu. Click on multiple icon of each column to open the column menu.</p>  
</SampleDescription>
<ActionDescription>
   <p>DataGrid has option to show column menu on clicking the multiple icon in each column. The column menu has integrated options which allows the user to interact with features like sorting, grouping, filtering, column chooser, and autofit. The column menu can be enabled by setting the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnMenu'>ShowColumnMenu</a></code> property value as <b>true</b>. The default items in the column menu are, </p>
   <ul>
       <li><strong>SortAscending</strong> - Sort the current column in ascending order.</li>
       <li><strong>SortDescending</strong> - Sort the current column in descending order.</li>
       <li><strong>Group</strong> - Group the current column.</li>
       <li><strong>Ungroup</strong> - Ungroup the current column.</li>
       <li><strong>AutoFit</strong> - Auto fit current column.</li>
       <li><strong>AutoFitAll</strong> - Auto fit all columns.</li>
       <li><strong>ColumnChooser</strong> - Choose the column visibility.</li>
       <li><strong>Filter</strong> - Show the filter option as given in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type'>Type</a></code> property of the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html'>GridFilterSettings</a></code> component.</li>
    </ul>
    <p>In this demo, column menu functionality is enabled by defining <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridModel%601~ShowColumnMenu.html'>ShowColumnMenu</a></code> as <b>true</b> with sorting, grouping, filtering, column chooser, and autofit options.</p>
    <p>More information on the column menu can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/columns/#column-menu'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid DataSource="@GridData" AllowGrouping="true" AllowSorting="true" AllowFiltering="true" AllowPaging="true" ShowColumnMenu="true">
               <GridFilterSettings Type="@Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>
                <GridGroupSettings ShowGroupedColumn="true"></GridGroupSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" Width="120" TextAlign="TextAlign.Right"  EditType="EditType.NumericEdit"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipName) HeaderText="Ship Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Visible="false" Width="200"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
